<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>小程序(H5实现)</title>
		<!-- <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"> -->
		<script type="text/javascript" src="../../uni_webview.js"></script>
		<link rel="stylesheet" href="../css/vant.css">
		<script src="../js/vue.min.js"></script>
		<!-- https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart -->
		<script src="../js/vant.min.js"></script>
		<script src="../js/axios.js"></script>
		<script src="../utils/request.js"></script>

		<!-- vxe-table表格组件样式 -->
		<link type="text/css" href="../css/vxe-table.css" rel="stylesheet" />
		<!-- vxe-table表格组件js -->
		<script type="text/javascript" src="../js/xe-utils.js"></script>
		<script type="text/javascript" src="../js/vxe-table.js"></script>

		<!-- 引入vconsole -->
		<script type="text/javascript" src="../js/vconsole.min.js"></script>

		<script src="https://cdn.bootcdn.net/ajax/libs/qs/4.0.0/qs.min.js"></script>
	</head>
	<body>


		<div id="app">
			<div>
				内置小程序
			</div>
			<div>
				<van-button @click="sendApp">向App发送消息</van-button>
				<!-- <van-button @click="linkAbout">about</van-button> -->
				<van-button @click="otherWebview">无状态webview</van-button>
				<van-button @click="login">H5调起App登录</button>
			</div>

			<div>
				<vxe-table :data="tableData">
					<vxe-table-column type="seq" width="60"></vxe-table-column>
					<vxe-table-column field="name" title="Name"></vxe-table-column>
					<vxe-table-column field="sex" title="Sex"></vxe-table-column>
					<vxe-table-column field="age" title="Age"></vxe-table-column>
				</vxe-table>
			</div>
		</div>

		<script>
			var vm = new Vue({
				el: '#app',
				mounted() {
					let _this = this
					document.addEventListener('UniAppJSBridgeReady', function() {

						uni.getEnv(function(res) {
							if (res.plus) {
								_this.Token = plus.storage.getItem('App-Token'); //取数据
								console.log('当前环境为【5+App】');
								console.log('Token', _this.Token)
								_this.initData()
							} else if (res.miniprogram) {
								console.log('当前环境为【微信小程序】');
							}
						});

					});
				},
				data() {
					return {
						Token: null,
						tableData: [{
								id: 10001,
								name: 'Test1',
								role: 'Develop',
								sex: 'Man',
								age: 28,
								address: 'test abc'
							},
							{
								id: 10002,
								name: 'Test2',
								role: 'Test',
								sex: 'Women',
								age: 22,
								address: 'Guangzhou'
							},
							{
								id: 10003,
								name: 'Test3',
								role: 'PM',
								sex: 'Man',
								age: 32,
								address: 'Shanghai'
							},
							{
								id: 10004,
								name: 'Test4',
								role: 'Designer',
								sex: 'Women ',
								age: 24,
								address: 'Shanghai'
							}
						]
					}
				},
				methods: {
					initData() {
						let _this = this;
						axios({
							method: 'post',
							headers: {
								'Authorization': 'Bearer ' + this.Token,
							},
							params: {
								page: 1,
								size: 20
							},
							data: {
								isDataFilter: true
							},
							url: "http://10.0.4.58/scm/api/v1/scmPurchaseContractHead/list",
						}).then(res => {
							if (res.data.code === 0) {
								// _this.tableData=res.data.data
							}

						}).catch(err => {
							console.log('err', err)
						})
					},
					sendApp() {
						uni.postMessage({
							data: {
								action: 'main',
								message: '向App发送消息'
							}
						});
					},
					linkAbout() {
						window.location.href = "./about.html"
					},
					otherWebview() {
						uni.postMessage({
							data: {
								action: 'navigateTo',
								id: '2001',
							}
						});
					},
					login() {
						uni.postMessage({
							data: {
								action: 'navigateTo',
								id: '1001',
							}
						});
					},
				}

			})

			//通过 CDN 引入时不会自动注册 Lazyload 组件
			// 可以通过下面的方式手动注册
			Vue.use(vant.Lazyload);

			Vue.use(VXETable)
		</script>

	</body>
</html>